<script setup lang="ts">
import { reactive, ref } from 'vue'
import ShortMessage from './ShortMessage.vue'
import { ElMessage } from 'element-plus'
import { register } from '@/api/interface/web/user'

const emit = defineEmits(['change'])

const loading = ref(false)

const formRef = ref()

const form = reactive({
  phone: '',
  code: '',
  password: '',
  repassword: '',
})

const rules = reactive({
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  repassword: [
    {
      required: true,
      message: '请确认密码',
      trigger: 'blur',
    },
  ],
})

const handleRegister = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      if (form.password !== form.repassword) {
        ElMessage({
          message: '两次输入的密码不一致',
          type: 'error',
          grouping: true,
        })
        return
      }
      loading.value = true
      const info = {
        phone: form.phone,
        password: form.password,
        code: form.code,
      }
      register(info)
        .then(() => {
          ElMessage({
            message: '注册成功',
            type: 'success',
          })
          emit('change', 'login')
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

const goLogin = () => {
  if (loading.value) {
    return
  }
  emit('change', 'login')
}
</script>

<template>
  <div class="register-form-wrapper">
    <div class="logo-container">
      <div class="logo"></div>
      <div class="title">注册</div>
    </div>
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="form-input-container">
        <el-form-item prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
      </div>
      <div class="form-input-container code-container">
        <el-form-item prop="code">
          <el-input v-model="form.code" placeholder="请输入验证码" />
        </el-form-item>
        <div class="short-message-container">
          <ShortMessage :phone="form.phone"></ShortMessage>
        </div>
      </div>
      <div class="form-input-container">
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" show-password />
        </el-form-item>
      </div>
      <div class="form-input-container">
        <el-form-item prop="repassword">
          <el-input v-model="form.repassword" placeholder="请确认密码" show-password />
        </el-form-item>
      </div>
    </el-form>
    <div class="submit-container">
      <el-button type="primary" round :loading="loading" @click="handleRegister">
        <span class="submit-text">注册</span>
      </el-button>
    </div>
    <div class="operation-container">
      <div class="login-container">已有账号？<span @click="goLogin">去登录</span></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register-form-wrapper {
  @include rect(auto, auto);
  @include flex(column, center, center);
  .logo-container {
    @include flex(row, flex-start, center);
    margin-bottom: 76px;
    .logo {
      @include rect(76px, 76px);
      @include background-image('../imgs/logo.png', 100%, 100%);
    }
    .title {
      font-family: 'PingFangSC-Bold';
      font-weight: 600;
      font-size: 36px;
      color: var(--el-color-primary-light-8);
      margin-left: 24px;
      pointer-events: none;
    }
  }
  .form-input-container {
    width: 418px;
    --el-component-size: 60px;
    --el-border-radius-base: 30px;
    :deep(.el-input__wrapper) {
      padding-left: 30px;
      padding-right: 30px;
    }
    :deep(.el-form-item__error) {
      padding-left: 30px;
      padding-top: 10px;
    }
  }
  .form-input-container + .form-input-container {
    margin-top: 32px;
  }
  .code-container {
    position: relative;
    .short-message-container {
      position: absolute;
      top: 17px;
      right: 31px;
    }
  }
  .submit-container {
    --el-border-radius-round: 30px;
    margin-top: 22px;
    margin-bottom: 36px;
    .el-button {
      height: 60px;
      width: 418px;
    }
    .submit-text {
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .operation-container {
    @include flex(row, center, center);
    pointer-events: none;
    .login-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 18px;
      color: rgba(144, 147, 154, 1);
      span {
        text-decoration: underline;
        cursor: pointer;
        pointer-events: auto;
        color: var(--theme-color);
      }
    }
    .register-container + .forget-container {
      margin-left: 140px;
    }
  }
}
</style>
